<template>
  <view class="write-shop-number">
    <view class="number-content">
      <view class="title">
        <text>请绑定商户号</text>
      </view>
      <view class="write-number">
        <input
          type="text"
          v-model="writeNumber"
          placeholder="请输入微信收款商户号"
        />
      </view>
    </view>
  </view>
  <view class="submit-write-number">
    <view class="sure-submit">
      <button @click="wureSubmitChange">绑定商户号</button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { addMerchant } from "@/api/apiList";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const getIds = ref();
const writeNumber = ref();
onLoad((e) => {
  if (e && e?.id) {
    getIds.value = e?.id;
  }
  if (e.businessCode) writeNumber.value = e.businessCode;
});

const wureSubmitChange = async () => {
  if (!writeNumber.value) {
    return uni.showToast({
      title: "商户号不能为空",
      icon: "none",
    });
  }

  const parms = {
    circleId: getIds.value,
    businessCode: writeNumber.value,
  };
  const response = await addMerchant(parms);
  console.log(response);
  if (response.code == 200) {
    uni.showToast({
      title: response.msg,
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 800);
  }
};
</script>
<style lang="scss" scoped>
.write-shop-number {
  margin: 0 30rpx;
  .number-content {
    padding-top: 30rpx;
    .title {
      padding-bottom: 20rpx;
      text {
        font-size: 30rpx;
      }
    }
    .write-number {
      display: flex;
      align-items: center;
      height: 80rpx;
      border: 1px solid #0753fd;
      border-radius: 8rpx;
      input {
        padding-left: 20rpx;
        font-size: 30rpx;
      }
    }
  }
}
.submit-write-number {
  position: fixed;
  bottom: 80rpx;
  width: 100%;
  .sure-submit {
    margin: 0 30rpx;
    button {
      background: #0753fd;
      color: white;
      border-radius: 1000rpx;
      font-size: 28rpx;
      padding: 10rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        display: none;
      }
    }
  }
}
</style>
